<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>192056209李昇叡</title>
		<style>
			*{
							margin: 0;
							padding: 0;
						}
						img{
							vertical-align: bottom;
						}
						.fl{
							float: left;
						}
						.fr{
							float: right;
						}
						li{
							list-style: none;
						}
						a{
							text-decoration: none;
						}
						h3{
							display: inline;
						}
						h4{
							display: inline;
						}
						.bd{
							border: 1px solid red;
						}			
						header{
							background-color: #2e2f33;
							height: 76px;
							width: 100%;
							position: fixed;
						}
						.header-box{
							width: 1200px;
							height: 75px;
							margin: 0 auto;
						}
						.header-box a{
							display: block;
							line-height: 75px;
							font-size: 20px;
						}
						.header-li:nth-child(1){
							padding-left: 5px;
						}
						.header-li:nth-child(2){
							padding-left: 100px;
						}
						.header-li:nth-child(3)
						{
							padding-left: 40px;
						}
						.search{
							padding: 20px 30px 0 0;
						}
						.user{
							padding-top: 15px ;
						}
						.main{
							padding-top: 90px;
							width: 1200px;
							margin: 0 auto;
						}
						.paimeng{
							width: 840px;
							height:262px;
						}
						.gonggao{
							width: 340px;
							height: 262px;
						}			
						.box3{
							margin-top: 30px;
							background-color: white;
							width: 840px;
						}
						.gonglue{
							width: 800px;
							height: 200px;
							background-color: bisque;
							margin:10px  0 0 20px;
						}
						.gongluebox{
							width: 150px;
							margin: 20px 0 10px 0;
						}
						.gongluebox p{
							text-align: center;
						}
						.gongluebox img{
							display: block;
							margin: auto;
						}
						.gongluebox:nth-child(1){
							margin-left: 100px;
						}
						.tanshuo{
							width: 800px;
							margin:20px 0 0 20px;
							background-color: bisque;
						}
						.title a{
							color:#b1968b;
						}
						.tanshuobox{
							margin-top: 5px;
							width: 350px;		
						}
						.tanshuobox:nth-child(2n){
							margin-left: 90px;
						}
						.tanshuobox1{
							width: 180px;
						}
						.tanshuobox1 a{
							border: 3px solid #b1968b;
						}
						.shuoyinfenlei{
							width: 800px;
							margin-left: 20px;
							margin-top: 30px;
							background-color: bisque;
						}
						.shuoyinfenlei h3{
							display: inline;
						}
						.shuoyingfenlei1{
							width: 800px;
						}
						.sybox{
							width: 180px;
							height: 30px;
							background-color: aqua;
							margin:5px 0 5px 15px;
						}
						.sybox img{
							padding-top: 3px;
						}
						
						.gongluejingxuan{
							background-color: bisque;
							width: 800px;
							margin: 50px 20px 50px 20px;
						}
						.pinlun{
							width: 700px;
							margin: 10px 0 0 50px;
							background-color: cyan;
						}
						.pinlunzhe{
							width: 480px;
						}
						.box4{
							width: 340px;
							margin-top: 30px;
						}
						.zhandianmulu{
							width: 340px;
							height: 30px;
							background-color: #2E2F33;
						}
						.zhandianmulu a{
							color: yellow;
						}
						.erweima{
							margin-top: 20px;
						}
						.ziliao{
							width: 240px;
							height: 100px;
						}
						.ziliao p{
							color: #0794E9;
						}
						.zuixincitiao{
							width: 340px;
							margin-top: 50px;
							background-color: bisque;
						}
						.zxctbox{
							width: 300px;
							margin:10px 0 0 20px;
							height: 30px;
							background-color: cyan;
						}
						.footbox{
							width: 100%;
							height: 30px;
							background-color: cornflowerblue ;
						}
						.footbox h3:nth-child(1){
							padding-left: 700px;
						}
		</style>
	</head>
	<body >
		<header >
			<div class="header-box">
				<div class="fl">
					<img src="images/logo.jpg" alt="">
				</div>
				<ul>
					<li class="fl header-li"><a style="color:#FFFFFF" href=""> | 米游社·原神</a></li>
					<li class="fl header-li"><a style="color:orange" href="">观测·攻略</a></li>
					<li class="fl header-li"><a style="color:#FFFFFF" href="">观测·Wiki</a></li>
				</ul>
				<div class="user fr">
					<img src="images/QQ图片20201109082650_04_03.jpg" >
				</div>
				<div class="search fr">
					<img src="images/QQ图片20201109082650_03.jpg" >
				</div>
			</div>	
		</header>
		<div class="main">
			<div class="paimeng fl">
				<img src="images/head_03.jpg" style="width: 840px; height: 262px;" >
			</div>
			<div class="gonggao fr">
				<img src="images/公告_03.jpg" style="width: 340px; height: 262px;">
			</div>
			<div class="box3  fl">
				<div class="gonglue">
					<div class="gongluebox fl">
						<img src="images/新手攻略.jpg" alt=""><p>新手攻略</p>
					</div>
					<div class="gongluebox fl">
						<img src="images/实用评测.jpg" alt=""><p>实用评测</p>
					</div>
					<div class="gongluebox fl">
						<img src="images/开荒手册.jpg" alt=""><p>开荒手册</p>
					</div>
					<div class="gongluebox fl">
						<img src="images/进阶攻略.jpg" alt=""><p>进阶攻略</p>
					</div>
				</div>
				<div class=" tanshuo  fl">
					<div class="title">
						<h3 >玩法探索</h3>
						<a class="fr" href="">更多内容></a>	
					</div>
					<div>
						<div class="tanshuobox fl ">
							<img src="images/新手合集.jpg" alt="">
							<div class=" tanshuobox1 fr">
								<h3>新手攻略</h3>
								<p>新人玩家必备指南</p>
								<br><a href="">更多</a>
							</div>
						</div>
						<div class="tanshuobox fl ">
							<img src="images/角色攻略.jpg" alt="">
							<div class="tanshuobox1 fr">
								<h3>角色攻略</h3>
								<p>蒙德逃跑的太阳</p>
								<br><a href="">更多</a>
							</div>
						</div>
						<div class="tanshuobox fl ">
							<img src="images/任务攻略.jpg" alt="">
							<div class="fr tanshuobox1">
								<h3>任务攻略</h3>
								<p>世界任务有点难？看这里</p>
								<br><a href="">更多</a>
							</div>
						</div>
						<div class="tanshuobox fl ">
							<img src="images/BOSS攻略.jpg" alt="">
							<div class="fr tanshuobox1">
								<h3>BOSS攻略</h3>
								<p>boss讨伐手册</p>
								<br><a class="" href="">更多</a>
							</div>
						</div>
					</div>
				</div>
				<div class="shuoyinfenlei  fl">
					<div class="title">
						<h3 >索引分类</h3>
						<a class="fr" href="">更多内容></a>	
					</div>
					<div class="shuoyingfenlei1 fl ">
						<div class="sybox  fl">
							<img src="images/提瓦特大地图.jpg" >
							<h4>提瓦特大地图</h4>
						</div>
						<div class="sybox  fl">
							<img src="images/提瓦特大地图.jpg">
							<h4>武器突破材料周常表</h4>
						</div>
						<div class="sybox  fl">
							<img src="images/提瓦特大地图.jpg">
							<h4>角色索引</h4>
						</div>
						<div class="sybox fl">
							<img src="images/提瓦特大地图.jpg">
							<h4>武器索引</h4>
						</div>
						<div class="sybox  fl">
							<img src="images/提瓦特大地图.jpg">
							<h4>圣遗物索引</h4>
						</div>
						<div class="sybox  fl">
							<img src="images/提瓦特大地图.jpg">
							<h4>怪物索引</h4>
						</div>
						<div class="sybox  fl">
							<img src="images/提瓦特大地图.jpg">
							<h4>材料索引</h4>
						</div>
						<div class="sybox  fl">
							<img src="images/提瓦特大地图.jpg">
							<h4>食物索引</h4>
						</div>
					</div>
				</div>
				<div class="gongluejingxuan  fl">
					<div class="title ">
						<h3 >攻略·精选</h3>
						<a class="fr" href="">更多内容></a>	
					</div>
					<div class="pinlun"fl>
						<img src="images/pto1.jpg" >
						<div class="pinlunzhe fr">
							<h2>[未归的终星]诡梦之星活动攻略</h2>
							<p>UID:123456789</p><br />
							<img src="images/北斗.jpg" alt="">
						</div>
					</div>
					<div class="pinlun fl">
						<img src="images/pto2.jpg" >
						<div class="pinlunzhe fr">
							<h2>[未归的终星]未知之星活动攻略</h2>
							<p>UID:100456789</p><br />
							<img src="images/砂糖.jpg" alt="">
						</div>
					</div>
					<div class="pinlun fl">
						<img src="images/pto3.jpg" >
						<div class="pinlunzhe fr">
							<h2>[未归的终星]活动攻略合集</h2>
							<p>UID:100456789</p><br />
							<img src="images/北斗.jpg" alt="">
						</div>
					</div>
					<div class="pinlun fl">
						<img src="images/pto4.jpg" >
						<div class="pinlunzhe fr">
							<h2>[未归的终星]活动详细解析</h2>
							<p>UID:100456789</p><br />
							<img src="images/砂糖.jpg" alt="">
						</div>
					</div>
					<div class="pinlun fl">
						<img src="images/pto5.jpg" >
						<div class="pinlunzhe fr">
							<h2>[未归的终星]公子攻略与技能分析</h2>
							<p>UID:100456789</p><br />
							<img src="images/北斗.jpg" alt="">
						</div>
					</div>
				</div>
			</div>
			<div class="box4  fr">
				<div class="zhandianmulu">
					<h3><a href="">站点目录</a></h3>
					<h3><a class="fr">></a></h3>
				</div>
				<div class="erweima fl">
					<img src="images/二维码_03.jpg" >
					<div class="ziliao  fr">
						<b><p>扫码下载米游社APP吧</p></b>
					</div>
				</div>
				<div class="zuixincitiao fl ">
					<div class="title">
						<h3 >最新词条</h3>
						<a class="fr" href="">更多内容></a>	
					</div>
					<div class="zxctbox  fl">
						<img src="images/北斗.jpg" >
						<h3>北斗</h3>
					</div>
					<div class="zxctbox  fl">
						<img src="images/砂糖.jpg" >
						<h3>砂糖</h3>
					</div>
					<div class="zxctbox  fl">
						<img src="./images/提瓦特大地图.jpg" alt="">
						<h3>提瓦特大地图</h3>
					</div>
				</div>
			</div>
		</div>	
		<footer class="fl footbox">
				<h3><a href="">关于我们</a></h3>
				<h3><a href="">版权信息</a></h3>
		</footer>
	</body>
</html>
